<template>
  <div>

    <div>
      <el-radio-group v-model="radioShow" @change="radioShowChange">
        <el-radio-button label="Branch" />
        <el-radio-button label="Tag" />
      </el-radio-group>
    </div>

    <el-divider />
    <el-table v-if="showBranch" ref="branchListTable" v-loading="branchListLoading" :data="branchList" height="560" border max-height="100%" style="width: 100%;" @selection-change="selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column type="expand">
        <template slot-scope="props">
          {{ props.row.commit.authoredDate + ":" + props.row.commit.authorName + ": " + props.row.commit.message }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="branch名称" />
      <el-table-column prop="protected" label="是否保护">
        <template slot-scope="scope">
          {{ scope.row.protected ? '是' : '否' }}
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="showTag" ref="tagListTable" v-loading="tagListLoading" :data="tagList" height="560" border max-height="100%" style="width: 100%;" @selection-change="selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column type="expand">
        <template slot-scope="props">
          {{ props.row.commit.authoredDate + ":" + props.row.commit.authorName + ": " + props.row.commit.message }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="tag名称" />
      <el-table-column prop="protected" label="是否保护">
        <template slot-scope="scope">
          {{ scope.row.protected ? '是' : '否' }}
        </template>
      </el-table-column>
    </el-table>

    <div>
      <el-button v-if="!deployRec.id" v-loading="deployButtonLoading || branchListLoading" :disabled="!enabled" class="next-button" type="primary" @click="startDeploy">
        部署
      </el-button>
    </div>
  </div>
</template>

<script>

import * as APIS from '@/api/server/index'

export default {
  name: 'BranchListComponent',
  components: {},
  props: {
    projectId: {
      type: Number,
      default: () => { return -1 }
    },
    deployRec: {
      type: Object,
      default: () => { return {} }
    },
    deployButtonLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      branchListLoading: false,
      tagListLoading: false,
      selections: [],
      branchList: [],
      tagList: [],
      showBranch: true,
      showTag: false,
      radioShow: 'Branch',

      STAGE_BRANCH_MERGE: 1,

      mergeBranchName: '',
      enabled: false
    }
  },
  computed: {
  },
  mounted() {
    this.$nextTick(() => {
      if (this.projectId !== -1) {
        this.getBranchList(this.projectId)
        this.getTagList(this.projectId)
      }
    })
  },
  methods: {
    // 选择改变
    selectionChangeHandler(val) {
      this.selections = val

      this.enabled = (val.length === 1)
      this.mergeBranchName = this.enabled ? this.selections[0].name : ''
    },

    radioShowChange() {
      if (this.radioShow === 'Branch') {
        this.showBranch = true
        this.showTag = false
      } else {
        this.showBranch = false
        this.showTag = true
      }
    },

    getBranchList(projectId) {
      this.branchListLoading = true
      return APIS.getProjectBranchList({
        projectId: projectId
      }).then(res => {
        this.branchList = res
        this.toggleSelection()
      }).finally(() => {
        this.branchListLoading = false
      })
    },

    getTagList(projectId) {
      this.tagListLoading = true
      return APIS.getProjectTagList({
        projectId: projectId
      }).then(res => {
        this.tagList = res
        this.toggleSelectionForTag()
      }).finally(() => {
        this.tagListLoading = false
      })
    },

    startDeploy() {
      this.$emit('deploy', this.mergeBranchName)
    },

    toggleSelection() {
      if (this.deployRec.sourceBranch && this.branchList.length > 0) {
        this.$nextTick(() => {
          this.branchList.forEach(b => {
            if (b.name === this.deployRec.sourceBranch) {
              this.$refs.branchListTable.toggleRowSelection(b)
            }
          })
        })
      }
    },

    toggleSelectionForTag() {
      if (this.deployRec.sourceBranch && this.tagList.length > 0) {
        this.$nextTick(() => {
          this.tagList.forEach(b => {
            if (b.name === this.deployRec.sourceBranch) {
              this.$refs.tagListTable.toggleRowSelection(b)
            }
          })
        })
      }
    }
  }
}

</script>

<style lang="scss" scoped>
  .next-button {
    margin-top: 25px;
    width: 120px;
    height: 50px;
    background-color: red;

    &:hover {
      background-color: darkred;
    }
  }
</style>
